<template>
	<div class="create" ref="body">
		<form>
			<h2>请提供您需要获取保险报价的车牌号码</h2>

			<div class="row code">
                <div class="input">
                	<a @click="changeProvince"><p>{{this.province}}</p><i :class="{show:showPopup}" /></a>
                    <input type="text" v-model="code" placeholder="输入车牌号" />
                </div>
            </div>

            <br/>

			<h2>请问您是个人投保还是公司投保？</h2>

			<div class="row radio">
				<div class="item person" :class="{active:tab===0}" @click="switchTab(0)">
					<i></i>
					<label>个人投保</label>
				</div>
				<div class="item company" :class="{active:tab===1}" @click="switchTab(1)">
					<i></i>
					<label>公司投保</label>
				</div>
			</div>

			<div class="row">
                <div class="input">
                	<label>被保险人</label>
                    <input type="text" v-model="name" placeholder="请输入被保险人姓名" />
                </div>
            </div>

            <div class="row" v-show="tab===0">
                <div class="input">
                	<label>身份证号</label>
                    <input type="text" v-model="idcard" placeholder="请输入被保险人身份证号" />
                </div>
            </div>

            <div class="row" v-show="tab===1">
                <div class="input">
                	<label>机构组织代码</label>
                    <input type="text" v-model="company" placeholder="请输入组织机构代码" />
                </div>
            </div>

			<small class="tips">
				{{
					isWorking
					? '客服人员会在15分内与您联系，请保持手机畅通'
					: '客服人员会在下一工作日（9:00-18:00）与您联系，请保持手机畅通'
				}}
			</small>

			<div class="row">
                <btn :disabled="disabled" :onClick="onSubmitClick">获取报价</btn>
            </div>
		</form>

		<p class="rules"><a @click="onOpenRules">车险购买规则说明</a></p>

		<div class="partner">
			<h6>合作机构</h6>

			<div class="logos clearfix">
				<div class="item">
					<img src="../../assets/imgs/logos/1.png" />
				</div>
				<div class="item">
					<img src="../../assets/imgs/logos/2.png" />
				</div>
				<div class="item">
					<img src="../../assets/imgs/logos/3.png" />
				</div>
				<div class="item">
					<img src="../../assets/imgs/logos/4.png" />
				</div>
			</div>
		</div>


		<province-popup
			:active="province"
			:visible="showPopup"
			:onComplete="changeProvinceComp" />
	</div>
</template>

<script>
import provincePopup from '@/components/provincePopup'
import alert from '@/components/alert'
import toast from '@/components/toast'
import btn from '@/components/btn'
import {getMobile} from '@/assets/token'
import emitter from '@/assets/emit'

export default {
	data() {
		return {
			tab: 0,
			code: '',
			name: '',
			idcard: '',
			company: '',
			defaultProvince: '沪',
			province: '',
			showPopup: false,
			disabled: true,
		}
	},
	beforeMount() {
		this.province = this.defaultProvince
	},
	methods: {
		scrollTop() {
			this.province = this.defaultProvince
			this.code = ''
			this.name = ''
			this.idcard = ''
			this.company = ''
			this.tab = 0
			this.disabled = true
			setTimeout(() => {
				this.$refs.body.scrollTop = 0
			})
		},
		onOpenRules() {
			emitter.$emit('openRules')
		},
		onSubmitClick() {
			const mobile = getMobile()

			const res = {
				coverInsType: this.tab === 0 ? 1 : 2,
				plateNum: this.province + this.code,
				coverInsName: this.name,
				mobile,
			}
			// 个人
			if (this.tab === 0) {
				res.coverInsId = this.idcard
			}
			// 公司
			else {
				res.coverInsId = this.company
			}
			this.onSubmit(res)
		},
		confirmSwitchTab() {
			return new Promise((resolve, reject) => {
				alert.show({
					desc: '切换将清除已填信息，是否切换？',
					btnTextN: '暂不',
					btnTextY: '仍要切换',
					callbackY: () => {
						resolve(true)
					},
					callbackN: () => {
						resolve(false)
					}
				})
			})
		},
		async switchTab(id) {
			let res = true
			
			// 有填过数据后切换才会提示‘切换时会清空已填信息’
			if (// this.province !== this.defaultProvince
				// || this.code !== ''
				this.name !== ''
				|| (this.tab === 0 && this.idcard !== '')
				|| (this.tab === 1 && this.company !== '')) {
				res = await this.confirmSwitchTab()
			}

			if (res) {
				// this.province = this.defaultProvince
				// this.code = ''
				this.name = ''
				this.idcard = ''
				this.company = ''
				this.tab = id
				this.disabled = true
			}
		},
		changeProvince(v) {
			this.showPopup = true
		},
		changeProvinceComp(v) {
			this.province = v
			this.showPopup = false
		},
		checkCanSubmit() {

			this.code = this.code.trim()
			this.name = this.name.trim()
			this.idcard = this.idcard.trim()
			this.company = this.company.trim()

			// 验证车牌号的正则
			const isPlate = /^[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

			// 验证18位身份证号的正则
			const isIdcard = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/

			this.disabled = true

			if (this.code === '') {
				return false
			} else if (!isPlate.test(this.code)) {
				return false
			} else if (this.name === '') {
				return false
			} else if (this.tab === 0 && this.idcard === '') {
				return false
			} else if (this.tab === 0 && !isIdcard.test(this.idcard)) {
				return false
			} else if (this.tab === 1 && this.company === '') {
				return false
			}

			this.disabled = false
		}
	},
	watch: {
		code(v) {
			v = v.trim()
			if (v !== '') {
				this.code = v.toUpperCase().substr(0,6)
			}

			this.checkCanSubmit()
		},
		idcard(v) {
			v = v.trim()
			if (v !== '') {
				this.idcard = v.toUpperCase().substr(0,18)
			}

			this.checkCanSubmit()
		},
		name() {
			this.checkCanSubmit()
		},
		company() {
			this.checkCanSubmit()
		}
	},
	computed: {
		isWorking() {
			const d = new Date()
			const week = d.getDay()
			// 如果是周六和周日，休息
			if (week === 0 && week === 6) {
				return false
			}
			// 判断时间，9点到晚上6点工作，其余休息
			const hour = d.getHours()
			if (hour >= 9 && hour < 18) {
				return true
			}
			return false
		}
	},
	props: {
		onSubmit: {
			type: Function,
			required: true
		}
	},
	components: {
		provincePopup,
		btn,
	}
}
</script>

<style scoped lang="scss">
	@import './style'
</style>